<!DOCTYPE html>
<html>
<head>
	<title></title>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]--> 
    <script language="javascript" type="text/javascript" src="../js/jquery-v1.5.1.js"></script> 
    <script language="javascript" type="text/javascript" src="../js/jquery.flot.js"></script>
    <script type="text/javascript" src="../js/sparklines.min.js"></script>
	<script type="text/javascript" src="../js/openerror-v1.0.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	// GLOBALS / CONFIG DATA
	var oe;
	var map;
	var opts = {'scale_from':undefined};
	var origin = {"coordinates":[42.73342147048282, -84.55609416961669]};
	var origin_marker;
	var offset_marker;
	var histogram_object;
	var data;
	
	// Float Rounding function
	function roundFloat(num, precision) { // precision refers to number of digits after the decimal place
		return Math.round(num*Math.pow(10,precision))/Math.pow(10,precision);
	}
	
	// Histogram object
	function Histogram() {
		this.distances = [];
		this.bucketSize = null;
		
	}
	Histogram.prototype.createHistogram = function() {
		if(this.bucketSize == null)
			return;
		
		
		var histogram = [[1,0],[2,0],[3,0],[4,0],[5,0]];
		for(var i=0;i<this.distances.length;i++) {
			var dist = this.distances[i];
			if(dist < this.bucketSize)
			{
				histogram[0][1]++;
			}
			else if(dist < (this.bucketSize * 2))
			{
				histogram[1][1]++;
			}
			else if(dist < (this.bucketSize * 3))
			{
				histogram[2][1]++;
			}
			else if(dist < (this.bucketSize * 4))
			{
				histogram[3][1]++;
			}
			else if(dist < (this.bucketSize * 5))
			{
				histogram[4][1]++;
			}
		}
		
		var object = {'sparkline':[],'flot':histogram};
		for(var i=0;i<histogram.length;i++) {
			object[i] = histogram[i][1];
		}
		
		return object;
	}
	

	
	function init() {
		// create the google map
		var myOptions = {
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(origin.coordinates[0], origin.coordinates[1])
		}
		map = new google.maps.Map(document.getElementById("map"), myOptions);
		
		// create the marker
		origin_marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(origin.coordinates[0], origin.coordinates[1]),  
  			map: map
		});
		
		histogram_object = new Histogram();
		histogram_object.bucketSize = 1;

		// create and configure the openerror object
		oe = new OpenError();
		oe.setDebug(false);
		oe.setK(3);
		oe.setStandardDeviation(90);
	}
	
	// Create a new random point, adjust all visualizations
	function generateNewPoint(){
		// remove the old marker if it exists
		if(typeof offset_marker !== "undefined")
		{
			offset_marker.setMap(null);
		}
		
		
		var point = oe.Random.boxMuller();
		var distance = Math.sqrt( (point.coordinates[0]*point.coordinates[0]) + (point.coordinates[1]*point.coordinates[1]));
		point.scale(origin.coordinates[0], oe.getStandardDeviation(), oe.getUnits());
		var image = "../img/blue_marker.png";
		offset_marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(origin.coordinates[0]+point.coordinates[0], origin.coordinates[1]+point.coordinates[1]),  
  			map: map,
  			icon: image
		});
		
		function showTooltip(x, y, contents) {
	        $('<div id="tooltip">' + contents + '</div>').css( {
	            position: 'absolute',
	            display: 'none',
	            top: y + 5,
	            left: x + 5,
	            border: '1px solid #fdd',
	            padding: '2px',
	            'background-color': '#fee',
	            opacity: 0.80
	        }).appendTo("body").fadeIn(200);
    	}
		
		document.getElementById("pointText").innerHTML = roundFloat(point.coordinates[0]+origin.coordinates[0],4)+", "+roundFloat(point.coordinates[1]+origin.coordinates[1],4);
		histogram_object.distances.push(distance);
		data = histogram_object.createHistogram();
		new BarSparkline("sparkline",histogram_object.distances,opts).draw();  // plot the sparkline
		$.plot($("#chart"), [                            // plot the chart
        {
            data: data.flot,
            bars: { show: true }
        }]);
	}
	</script>
</head>
<body onload="init()">
<h2>Generate Random Points and plot on Sparkline</h2>
<p>Generate a new point using the box muller function and add the x value to a list of data points. It then plots the sparkline.</p>

<div>
	<table>
	<tr>
		<td>
			<div id="map" style="width:500px;height: 400px;border: 1px solid black;float: left;">
		</td>
		<td style="vertical-align:top;">
		<input type="button" value="Randomize Point" onclick="generateNewPoint()" /><br/>
		New Point: <span id="pointText"></span><br/>
		Distances: <canvas id="sparkline" style="height:16px;width:200px;"></canvas><br/>
		Histogram:
		<div id="chart" style="width: 300px; height: 150px;"></div>
		<p>The first bar is the number of distances within 1 standard deviations (i.e. < 90m ), the second bar is the number of distances in between 1 and 2 standard deviations.</p>
		</td>
	</tr>
	</table>

</div>

</body>
</html>